<template>
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
	  :collapse="isCollapse"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
	  
	  <img style="width: 200px;height: 80px;" src="@/assets/images/bgc.png" />
      <h3 @click="changeCollapse"><i v-if="isCollapse" class="el-icon-s-unfold"></i><i v-else><i>专业分包报价系统</i></i></h3>
      
	  
	  <el-submenu :index="item.name+':'+item.path" v-for="item in userInfo.menus" :key="item.id">            
        <template slot="title">
          <i :class="item.icon"></i>
          <span>{{item.name}}</span>
        </template>
        <el-menu-item-group v-if="item.children">
          <!-- <template slot="title">分组一</template> -->
          <el-menu-item @click="clickMenu(subItem)" :index="subItem.name" v-for="subItem in item.children" :key="subItem.id">{{subItem.name}}</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
</template>

<script>
  import {getSysMenus} from '@/api/sysmenu.js'
  import {
  	mapState
  } from 'vuex'
  export default {
    data() {
      return {
		isCollapse: false,
		// isCollapse: true,
        sysMenu: []
      }
    },
    methods: {
	  changeCollapse() {
		 this.isCollapse = !this.isCollapse
	  },
      handleOpen(key, keyPath) {
        const p = key.substring(key.indexOf(":") + 1,key.lenth);
        if (p !== 'null' && this.$route.path !== p) {
          this.$router.push(p)
        }
      },
      handleClose(key, keyPath) {
        const p = key.substring(key.indexOf(":") + 1,key.lenth);
        if (p !== 'null' && this.$route.path !== p) {
          this.$router.push(p)
        }
      },
      clickMenu(item) {
        // console.log(item)
        if (item.path && this.$route.path !== item.path) {
          this.$router.push(item.path)
        }
      },
	  async getMenus() {
		  await getSysMenus({
		  		useq: this.userInfo.useq
		  }).then((data) => {
		    console.log('data',data)
		    if (data.status === 200) {
		      // console.log (data.data.data)
		      this.sysMenu = data.data.data
			  // location.reload();
		    }
		  })
	  }
    },
	computed: {
		...mapState(['token', 'isAuth', 'userInfo'])
	},
    mounted () {
      // this.getMenus()
    },
	created() {
	  // this.getMenus()
	  // location.reload();
	}
  }
</script>

<style lang="less" scoped>
	
  .el-menu-vertical-demo:not(.el-menu--collapse) {
      width: 200px;
      min-height: 400px;
    }

  .el-menu{
    height: 100vh;
    h3 {
      margin: 0px;
      text-align: center;
      font-size: 16px;
      color: #fff;
      font-weight: 400;
      line-height: 48px;
    }
  }

</style>    